<template>
  <header>
    <div class="learingHeader">
      <nav class="navbar">
        <div class>
          <div class="logo">
            <img src="../../assets/img/logoIco.png" width="100%" alt />
          </div>
          <div class="nav-list">
            <ul class="nav navbar-nav">
              <li>
                <a :href="portal_url + '/pages/learing-index.html'">首页</a>
              </li>
              <li>
                <a :href="portal_url + '/pages/learing-list.html'">课程</a>
              </li>
              <li>
                <a href="#">职业规划</a>
              </li>
              <li></li>
            </ul>
          </div>

          <!-- 未登录 -->
          <div class="sign-in" v-if="!userName">
            <router-link to="/login?isRegnew=0">登录</router-link>
            <span>&nbsp;|&nbsp;</span>
            <router-link to="/login?isRegnew=1">注册</router-link>
          </div>
          <!-- 已登录 -->
          <div class="sign-in" v-else>
            <!-- TODO: 样式和首页有略微差异 -->
            <router-link to="/personal/my-course" class="personal">个人中心</router-link>
            <!-- TODO: 未入驻之前不显示管理入口 -->
            <router-link to="/organization/company" class="personal">管理</router-link>/
            <!-- TODO: 已入驻之后不显示入驻入口 -->
            <div class="dropdown">
              <span class="dropbtn">入驻</span>
              <div class="dropdown-content">
                <router-link to="/entering/company-entering" class="personal">机构入驻</router-link>
                <router-link to="/entering/personal-entering" class="personal">个人入驻</router-link>
              </div>
            </div>
            <div class="personal">
              <span class="personalIco"></span>
            </div>
            <div class="dropdown myInfo">
              <div class="dropbtn">
                <img src="../../assets/img/myImg.jpg" alt />
                <span>{{userName}}</span>
              </div>
              <div class="dropdown-content">
                <a href="javascript:;" @click="handleLogout">退出登录</a>
              </div>
            </div>
          </div>
          <div class="starch">
            <input
              type="text"
              v-model="keyword"
              id="inputSearch"
              class="input-search"
              placeholder="输入查询关键词"
            />
            <input
              id="btnQuery"
              class="search-buttom"
              type="submit"
              value="提交"
              @click="handleSearchCourse"
            />
          </div>
        </div>
      </nav>
    </div>
  </header>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { UserModule } from '@/store/modules/user'

@Component({
  name: 'PortalHeader'
})
export default class extends Vue {
  private userName: string = UserModule.name
  private portal_url: string = process.env.VUE_APP_CLIENT_PORTAL_URL
  private keyword: string = ''

  /**
   * 跳转到课程列表页
   */
  private handleSearchCourse() {
    window.open(
      `${this.portal_url}/pages/learing-list.html?k=${this.keyword}`,
      '_blank'
    )
  }

  /**
   * 退出登录
   */
  private handleLogout() {
    UserModule.LogOut()
  }
}
</script>

<style lang="scss" scoped>
@import 'index';
</style>
